<template>
    <div class="mark">
        <el-row>
            <el-breadcrumb separator=">">
                <el-breadcrumb-item >商品管理</el-breadcrumb-item>
                <el-breadcrumb-item>唛头管理</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>
        <el-row>
            <el-button type="primary" size="small" @click="$refs['markDetail'].show()">新增唛头</el-button>
        </el-row>
        <el-row>
            <el-table
            :data="tableDat" stripe border>
                <el-table-column
                    prop="name"
                    label="名称">
                </el-table-column>
                <el-table-column
                    prop="note"
                    label="说明">
                </el-table-column>
                <el-table-column
                    label="图片">
                    <template slot-scope="scope">
                        <img :src="scope.row.img"  width="100"/>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" 
                         @click="$refs['markDetail'].show(scope.row)">编辑</el-button>
                        <el-button type="text" 
                        @click="handleDelete(scope.row.id)" 
                        style="color:red;">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        
        <mark-detail ref="markDetail" @update="fetchList"></mark-detail>
    </div>    
</template>
    
<script>
import productApi from '../../api/product';
import MarkDetail from './MarkDetail.vue';

export default {
    components: {
        MarkDetail
    },
    data() {
        return {
            tableDat: [],
        };
    },
    created() {
        this.fetchList();
    },
    methods: {
        fetchList() {
            productApi.markList().then(res=>{
                this.tableDat = res.data;
            });
        },
        handleDelete(id) {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                productApi.deleteMark({id}).then(()=>{
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.fetchList();
                });
                
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消删除'
                });          
            });
            
        }
        
    },
        

};
</script>